<!-- 在线建楼首页 -->
<template>
	<view class="home-container">
		<view class="banner">
			<image :src="bannerSrc" mode=""></image>
		</view>
		<view class="content">
			<view class="box">
				<u-checkbox-group @change="checkboxChange">
					<view class="checkList">
						<view class="item option-btns">
							<view class="con">
								<view class="add" @click="add()">
									+新建楼栋
								</view>
								<view class="copy" @click="copy()">
									复制已有楼栋
								</view>
							</view>
						</view>
						<view :class="[item.saleState == 0 ? 'start' : 'stop'] " v-for="(item, index) in buildList"
							:key="index">
							<u-checkbox v-if="checkboxShow" v-model="item.checked" shape="circle"
								:name="item.floorName">
							</u-checkbox>
							<view class="bread" @click="showBread(index)">
								<text>.</text>
								<text>.</text>
								<text>.</text>
							</view>
							<view v-if="showoOptionBtns" :class="[currentData == index ? 'optionsActive':'edit-Del']">
								<view class="edit">
									<image :src="editSrc" mode=""></image>
									<text @click="editBuild(item)">编辑</text>
								</view>
								<view class="del">
									<image :src="delSrc" mode=""></image>
									<text @click="deleteBuild(item.id)">删除</text>
								</view>
							</view>
							<view class="building">
								<text>{{item.floorName}}</text>
							</view>
							<view class="building-info">
								<text>{{item.floorType}}</text>
								<text>{{item.floorNums}}层</text>
								<text>在售{{item.saleCount}}/{{item.allCount}}</text>
							</view>
							<view class="sale">
								<text v-if="item.sellState == 1" @click="startSale(item.floorName, item)">开始开售</text>
								<text v-else>停止开售</text>
							</view>
							<view class="date">
								<text>{{item.sellTime}}开售</text>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</view>
		<!-- 销售时间弹出层 -->
		<u-popup v-model="showSale" mode="bottom" :closeable="true" @close="close('sale')" height="40%">
			<view class="popupTitle">
				销售设置
			</view>
			<view class="popupCon">
				<view class="item">
					<text>楼栋：</text>
					<text>{{isCheckedSale}}</text>
				</view>
				<view class="item" @click="showTime = true">
					<text>开始销售时间：</text>
					<u-form :model="formSale">
						<u-picker v-model="showTime" :params="params" mode="time" @confirm="changeTime"></u-picker>
					</u-form>
					<text v-if="timeDate">{{timeDate}}</text>
					<text v-else style="color: #B7B7B7;">请选择时间&nbsp;></text>
				</view>
				<button class="submit" @click="submit(formSale)"
					style="position: fixed;left: 0; right: 0; bottom: 10rpx;width: 90%;margin: auto;">确定</button>
			</view>
		</u-popup>
		<!-- 复制弹出层 -->
		<u-popup v-model="showAdd" mode="bottom" :closeable="true" @close="close('add')">
			<view class="popupTitle">
				新建楼栋
			</view>
			<view class="popupCon">
				<view class="item">
					<text>已选择复制的楼栋：</text>
					<text>{{isCheckedList}}</text>
				</view>
				<view class="item">
					<text>新建楼栋名称：</text>
					<u-form :model="formCopy">
						<u-input v-model="formCopy.valueCopy" :border="false" inputAlign="right"
							placeholder="请输入新建楼栋名称"></u-input>
					</u-form>
				</view>
				<button class="submit" @click="submitAdd(formCopy)">确定</button>
			</view>
		</u-popup>
		<!-- 编辑楼栋 -->
		<u-popup v-model="showEdit" mode="bottom" :closeable="true" @close="close('edit')">
			<view class="popupTitle">
				编辑楼栋
			</view>
			<view class="popupCon">
				<view class="item">
					<text>已选择编辑的楼栋：</text>
					<text></text>
				</view>
				<view class="item">
					<text>楼栋名称：</text>
					<u-form :model="formEdit">
						<u-input v-model="formEdit.buildingName" :border="false" inputAlign="right"
							placeholder="请输入新建楼栋名称"></u-input>
					</u-form>
				</view>
				<button class="submit" @click="submitEdit(formEdit)">确定</button>
			</view>
		</u-popup>
		<!-- 删除提示弹框 -->
		<u-modal v-model="showDel" :content="content" @confirm="confirmDel" :mask-close-able="true" @cancel="cancel"
			:show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import {
		selectList,
		floorControllerUpdate,
		floorControllerDelete,
		floorControllerCopy
	} from '@/unit/api.js';
	export default {
		data() {
			return {
				content: '确认删除该楼栋吗？',
				bannerSrc: require("../../static/images/banner.png"),
				editSrc: require("../../static/images/edit.png"),
				delSrc: require("../../static/images/delete.png"),
				radioActiveSrc: require("../../static/images/radio_active.png"),
				radioSrc: require("../../static/images/radio.png"),
				showoOptionBtns: false, // 编辑删除按钮
				radioShow: false, // radio显示
				active: false, // radio选中状态
				showSale: false, // 销售时间弹出层
				isCheckedSale: "", // 选择修改销售时间的楼栋数
				showAdd: false, // 新建弹出层(复制弹出层)
				checkboxShow: false, // 自定义checkbox
				isCheckedList: [], // 已选择房间数
				checkLength: 0, // 已选多少个
				isIdList: [], // 已选择房间数(用于提交)
				buildList: [], // 栋列表
				showTime: false, // 销售时间弹框
				showDel: false, // 删除提交框
				delId: '', // 删除id
				loginContent: '请检查您的操作无误！',
				formSale: {
					valueTime: Number(new Date())
				},
				formCopy: {
					valueCopy: ''
				},
				showPlaceHolder: true,
				timeDate: "",
				obj: {},
				communityId: "", // 小区id
				currentData: '', // 控制显示编辑删除按钮
				showEdit: false, // 编辑弹框
				formEdit: {
					buildingName: ''
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		onLoad(option) {
			this.getBuildList(option.id);
		},
		methods: {
			// 获取栋列表
			getBuildList(args) {
				const param = {
					communityId: args // 小区id
				};
				uni.setStorageSync("communityId", args)
				selectList(param).then(data => {
					if (data.data.code == 1) {
						this.buildList = data.data.object.list;
					} else {
						uni.showToast({
							title: data.msg,
							icon: "none",
							duration: 2000
						})
					}
				});
			},
			// 显示编辑删除按钮
			showBread(args) {
				this.currentData = args;
				this.showoOptionBtns = !this.showoOptionBtns;
			},
			// 复制已有楼栋
			copy() {
				this.checkboxShow = true;
			},
			// 弹出层关闭
			close(args) {
				if (args == "sale") {
					this.showSale = false
					this.formSale.valueTime = "";
				} else if (args == "add") {
					this.showAdd = false;
					this.formCopy.valueCopy = "";
					this.checkboxShow = false;
				} else if (args == "del") {
					this.showDel = false;
				} else {
					this.showEdit = false;
				}
			},
			// （设置销售时间）弹出层提交
			submit(args) {
				this.checkboxShow = false;
				this.showSale = false;
				const param = {
					id: this.obj.id, // 楼栋id
					// sellTime: uni.$u.timeFormat(this.formSale.valueTime, 'yyyy-mm-dd hh:MM:ss'), // 销售时间
					sellTime: this.timeDate,
					sellState: this.obj.sellState, //  销售状态
				};
				floorControllerUpdate(param).then(data => {
					if (data.data.code == 1) {
						this.getBuildList(this.communityId)
					} else {
						uni.showToast({
							title: data.msg,
							icon: "none",
							duration: 2000
						})
					}
				});
			},
			// 新增
			add() {
				uni.navigateTo({
					url: "../basic/basic"
				})
				// this.showAdd = true;
			},
			// 选择复选框
			checkboxChange(n) {
				this.checkLength = n.length;
				this.isCheckedList = n.join(",")
				this.showAdd = true;
				this.buildList.map(val => {
					n.filter(v => {
						if (v == val.floorName) {
							this.isIdList.push(val.id);
						}
					})
				});
			},
			// 开始销售
			startSale(args, obj) {
				this.showSale = true;
				this.isCheckedSale = args;
				this.obj = obj;
			},
			// 弹出销售时间框
			showSaleTime() {
				this.showTime = true;
			},
			submitAdd(args) {
				this.showAdd = false;
				this.checkboxShow = false;
				let param = {
					floorId: this.isIdList[0], // 楼栋id
					floorName: args.valueCopy // 楼栋名称
				};
				floorControllerCopy(param).then(data => {
					if (data.data.code == 1) {
						this.getBuildList(this.communityId);
						this.showDel = false;
					} else {
						uni.showToast({
							title: data.msg,
							icon: "none",
							duration: 2000
						})
					}
				});
			},
			// 时间弹框确认
			changeTime(e) {
				this.timeDate = e.year + "-" + e.month + "-" + e.day + "  " + e.hour + ":" + e.minute + ":" + e.second;
				this.showTime = false;
				this.showPlaceHolder = true;
			},
			// 删除楼栋
			deleteBuild(args) {
				this.showDel = true;
				this.delId = args;
				this.showoOptionBtns = false;
			},
			cancel() {
				this.showDel = false;
			},
			confirmDel() {
				floorControllerDelete(this.delId).then(data => {
					if (data.data.code == 1) {
						this.getBuildList(this.communityId);
						this.showDel = false;
					} else {
						uni.showToast({
							title: data.msg,
							icon: "none",
							duration: 2000
						})
					}
				});
			},
			// 编辑
			editBuild(args) {
				this.formEdit.buildingName = args.floorName;
				this.showEdit = true;
				uni.setStorageSync("editId", args.id);
				this.showoOptionBtns = false;
			},
			submitEdit(args) {
				const param = {
					floorName: args.buildingName, // 楼栋名称
					id: uni.getStorageSync("editId")
				};
				floorControllerUpdate(param).then(data => {
					if (data.data.code == 1) {
						this.getBuildList(this.communityId)
						this.showEdit = false;
					} else {
						this.showEdit = false;
						uni.showToast({
							title: data.msg,
							icon: "none",
							duration: 2000
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.home-container {
		.banner {
			height: 360rpx;
			width: 100%;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.content {
			border-radius: 30rpx 30rpx 0px 0px;
			background: #fff;
			width: 100%;
			argin-top: -50rpx;
			z-index: 999;
			position: absolute;

			.box {
				width: 94%;
				margin: auto;
				// display: flex;
				// flex-wrap: wrap;
				// justify-content: space-around;

				.item {
					width: 320rpx;
					height: 200rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 20rpx;
					position: relative;
					text-align: center;
					margin-left: 10rpx;
					margin-right: 10rpx;

				}

				.bread {
					position: absolute;
					right: 20rpx;
					top: 10rpx;

					text {
						display: block;
						line-height: 10rpx;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.optionsActive {
					position: absolute;
					top: 16rpx;
					right: 35rpx;
					display: block;

					.edit,
					.del {
						background: #fff;
						border-radius: 10rpx;
						height: 50rpx;
						width: 120rpx;
						text-align: center;
						line-height: 45rpx;
						margin-bottom: 10rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							vertical-align: middle;
							margin-right: 5rpx;
						}

						text {
							color: #666;
							font-size: 24rpx;
							vertical-align: middle;
						}
					}
				}

				.edit-Del {
					position: absolute;
					top: 16rpx;
					right: 35rpx;
					display: none;

					.edit,
					.del {
						background: #fff;
						border-radius: 10rpx;
						height: 50rpx;
						width: 120rpx;
						text-align: center;
						line-height: 45rpx;
						margin-bottom: 10rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							vertical-align: middle;
							margin-right: 5rpx;
						}

						text {
							color: #666;
							font-size: 24rpx;
							vertical-align: middle;
						}
					}
				}

				.option-btns {
					border: 1px solid #1D9CED;
					border-radius: 25rpx;
					color: #199AED;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 194rpx !important;

					.con {
						height: 160rpx;
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;

						.add,
						.copy {
							width: 70%;
							height: 55rpx;
							border: 1px solid #199AED;
							border-radius: 25rpx;
							text-align: center;
							line-height: 55rpx;
							font-size: 32rpx;
						}
					}
				}

				.stop {
					background: url(../../static/images/stop_bg.png) no-repeat;
					border-radius: 25rpx;
					justify-content: center;
					align-items: center;
					background-size: cover;

					width: 320rpx;
					height: 200rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 20rpx;
					position: relative;
					text-align: center;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}

				.start {
					background: url(../../static/images/start_bg.png) no-repeat;
					border-radius: 25rpx;
					justify-content: center;
					align-items: center;
					background-size: cover;

					width: 320rpx;
					height: 200rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 20rpx;
					position: relative;
					text-align: center;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}

				.building {
					font-size: 36rpx;
					width: 100%;
					display: block;
					text-align: center;
				}

				.building-info {
					font-size: 24rpx;
					width: 100%;

					text {
						display: inline-block;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}

				.date {
					color: #003EFF;
					font-size: 24rpx;
					display: block;
					width: 100%;
					text-align: center;
				}

				.sale {
					color: #003EFF;
					font-size: 32rpx;
					width: 100%;
				}

				/deep/.u-checkbox {
					border-radius: 25rpx;
					position: absolute;
					left: 0;
					right: 0;
					margin-left: auto;
					margin-right: auto;
					text-align: center;
					display: flex;
					justify-content: center;
					height: 100%;
					width: 100%;
					background: rgba(0, 0, 0, 0.2);
				}

				/deep/.u-checkbox__icon-wrap {
					margin-left: 0;
					margin-right: 0;
					text-align: center;
					margin: auto;
					position: absolute;
					display: flex;
					justify-content: center;
					border: 1px solid #2B85E4;
				}
			}
		}

		.popupTitle {
			text-align: center;
			font-size: 32rpx;
			color: #333333;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #E4E4E4;
			width: 100%;
		}

		.popupCon {
			width: 95%;
			margin: auto;

			.item {
				margin: auto;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				width: 95%;
				border-bottom: 1px solid #F9F9F9;
				align-items: center;
				font-size: 32rpx;

				/deep/.u-input__content__field-wrapper__field {
					text-align: right !important;
					margin-right: 20rpx;
					font-size: 32rpx !important;
				}
			}

			.submit {
				background-image: linear-gradient(to right, #21A9FF, #199AEC) !important;
				height: 90rpx;
				color: #fff;
				font-size: 32rpx;
				margin-bottom: 50rpx;
				margin-top: 40rpx;
				line-height: 90rpx;
			}
		}
	}

	.checkList {
		width: 100%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/deep/.u-checkbox-group {
		overflow: hidden !important;
	}
</style>
